<template>
  <div class="fenyi">
    <div class="shuosuo">
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
          
        >
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-button type="success"
        ><i class="el-icon-upload el-icon-plus"></i>上传</el-button
      >
    </div>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;"

      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
    
    
    
      <el-table-column prop="name" label="ID" width="120"> </el-table-column>
      <el-table-column prop="name" label="分类名称" width="250"> </el-table-column>
      <el-table-column prop="name" label="编号/型号" width="250">qa </el-table-column>
      <el-table-column prop="name" label="图标" width="120">- </el-table-column>
      <el-table-column prop="name" label="封面" width="120">- </el-table-column>
      <el-table-column prop="name" label="状态" width="120">  <el-tag type="success">启用</el-tag></el-table-column>
   
      <el-table-column prop="name" label="姓名" width="48"> <el-link type=" primary">编辑</el-link></el-table-column>
      <el-table-column prop="name" label="姓名" width="48">   <el-link type="danger">删除</el-link>
</el-table-column>
    </el-table>
  </div>
</template>
<script>
import fenleguanyi from "@/api";

export default {
  data() {
    return {
      form: {},
      value: "",
      scope:'',
      multipleSelection: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
          disabled: true,
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },

  methods: {
    // 表格
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },

    fenleguanyi() {
      fenleguanyi(params).then((res) => {
        console.log(res);
      });
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
body {
  background-color: #fff;
}
.fenyi {
  position: relative;

}
.shuosuo {
  width: 100%;
  height: 50px;
  /* position: absolute; */
  /* top: -63px; */
  /* left: 0; */
  /* z-index: 55; */
  /* display: flex; */
}
</style>
<style scoped>
.element {
  margin-left: 0;
}
</style>
